<template>
	<el-table
		ref="tableRef"
		height="100%"
		v-bind="tableParams"
		v-on="$listeners"
		:data="data"
		:cell-class-name="cellClassNameFn"
		:header-cell-style="headerCellStyle"
	>
		<el-table-column
			type="selection"
			align="center"
			header-align="center"
			:selectable="selectable"
			v-if="showSelection"
		/>
		<el-table-column
			type="index"
			width="80"
			:label="noName"
			:index="noMethod"
			v-if="showNo"
		/>
		<el-table-column
			v-for="(column, index) of columns"
			v-bind="column"
			:key="index"
			:formatter="!column.formatter ? emptyFormatter : column.formatter"
			show-overflow-tooltip
		>
			<template #default="{row}" v-if="$scopedSlots[column.prop]">
				<slot :name="column.prop" :value="row[column.prop]" :row="row"></slot>
			</template>
		</el-table-column>
		<slot name="action"></slot>
	</el-table>
</template>

<script>
export default {
	name: 'CommonTable',
	data() {
		return {};
	},
	props: {
		// 列表数据
		data: {
			type: [Array],
			default: () => [],
		},
		// el-table 相关属性
		tableParams: {
			type: [Object],
			default: () => ({}),
		},
		columns: {
			type: [Array],
			default: () => [],
		},
		// 显示selection
		showSelection: {
			type: Boolean,
			default: true,
		},
		// 页码信息
		page: {
			type: Object,
			default: () => {},
		},
		// 是否显示排序序号
		showNo: {
			type: Boolean,
			default: false,
		},
		// 序号名称
		noName: {
			type: String,
			default: '序号',
		},
		// 复选框是否禁用
		onSelectTable: {
			type: Boolean,
			default: true,
		},
		// 表头样式
		headerCellStyle: {
			type: [Function, Object],
			default: () => {},
		},
	},
	computed: {},
	components: {},
	watch: {
		'$route.path'() {
			this.$nextTick(function() {
				this.$refs.tableRef.doLayout();
			});
		},
	},
	created() {},
	mounted() {},
	methods: {
		noMethod(index) {
			if (this.data.length > 0) {
				return (this.page.current - 1) * this.page.size + index + 1;
			}
		},
		selectable(row) {
			if (!this.onSelectTable) {
				return true;
			}
			if (row.status === 1) {
				return true;
			} else {
				return false;
			}
		},
		// 滚动条返回顶部
		scrollTop() {
			this.$nextTick(() => {
				this.$refs.tableRef.bodyWrapper.scrollTop = 0;
			});
		},
		// 为空时返回--
		emptyFormatter(row, column, value) {
			if (!value && value !== 0) {
				return '--';
			}
			return value;
		},
		cellClassNameFn(row) {
			if (!this.onSelectTable && row.row.status === 1) {
				// 通过自定义样式隐藏复选框
				return 'table-column-hidden';
			}
		},
	},
};
</script>
<style scoped lang="less">
::v-deep {
	.table-column-hidden {
		.el-checkbox__input {
			display: none !important;
		}
	}
}
</style>
